<template>

<div>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="padding: 11px">
        <el-tab-pane label="保养计划" name="first">
            <el-row>
                <div style="border: 0.5px solid #DCDFE6">
                    <el-button-group>
                        <el-button size="mini" icon="el-icon-plus" style="border: none;" @click="showAddPlan"></el-button>
                        <!-- <el-button size="mini" icon="el-icon-edit" style="border: none;"></el-button> -->
                        <!-- <el-popconfirm title="确定删除所选行吗？"> -->
                        <el-button size="mini" icon="el-icon-delete" style="border: none;" @click="deletePlan"></el-button>
                        <!-- </el-popconfirm> -->
                    </el-button-group>
                    <el-table ref="planTable" @row-click="planRowClick" :data="tableDataSchedule" style="width: 100%"
                              :header-cell-style="{'font-weight':'bold', color:'#2A2A2A'}"
                              highlight-current-row>
                        <el-table-column prop="label" label="保养内容" ></el-table-column>
                        <el-table-column prop="type" label="保养类型" width="180"></el-table-column>
                        <el-table-column prop="dateTime" label="计划时间"></el-table-column>
                        <el-table-column prop="nextTime" label="下次保养时间"></el-table-column>
                        <el-table-column prop="operation" label="操作" width="80"></el-table-column>
                    </el-table>
                </div>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="保养记录" name="second">
            <el-row>
                <el-form :model="logSearchForm" :inline="true">
                    <el-form-item label="模块" >
                    <el-select v-model="logSearchForm.module">
                        <el-option v-for="item in modules" :key="item.module" :label="item.module" :value="item.module">

                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="开始时间" >
                    <el-date-picker   v-selfdbclick  v-model="logSearchForm.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" >
                    <el-date-picker   v-selfdbclick  v-model="logSearchForm.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                        <el-button type="primary" @click="searchLog">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <div style="border: 0.5px solid #DCDFE6">
                    <el-button-group>
                        <el-button size="mini" icon="el-icon-plus" style="border: none;" @click="showAddLog"></el-button>
                        <!-- <el-button size="mini" icon="el-icon-delete" style="border: none;" @click="deleteLog"></el-button> -->
                    </el-button-group>
                    <el-table ref="logTable"  :data="tableDataLog" style="width: 100%"
                              :header-cell-style="{'font-weight':'bold', color:'#2A2A2A'}"
                              highlight-current-row>
                        <el-table-column prop="module" label="模块" width="180"></el-table-column>
                        <el-table-column prop="parts" label="部件" width="180"></el-table-column>
                        <el-table-column prop="content" label="保养内容"></el-table-column>
                        <el-table-column prop="way" label="保养方法"></el-table-column>
                        <el-table-column prop="standard" label="保养标准"></el-table-column>
                        <el-table-column prop="period" label="保养周期"></el-table-column>
                        <el-table-column prop="dateTime" label="保养时间"></el-table-column>
                    </el-table>
                </div>
            </el-row>
        </el-tab-pane>

    </el-tabs>

    <el-dialog title="添加保养计划" :visible.sync="is_showAddPlan" width="500" :before-close="handleClose">
        <div style="overflow-y: auto;height: 560px;">
            <el-form :model="addPlanForm" class="demo-form-inline" :inline="true" label-position="left">
                <!-- <el-form-item label="保养内容" label-width="100px">
                    <el-input v-model="addPlanForm.label" placeholder="" style="width:240px"></el-input>
                </el-form-item> -->
                <el-form-item label="类型" label-width="100px">
                    <el-input v-model="addPlanForm.type" placeholder="" style="width:220px"></el-input>
                </el-form-item>
                <el-form-item label="计划时间" label-width="100px">
                    <el-date-picker   v-selfdbclick  v-model="addPlanForm.dateTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="下次保养时间" label-width="100px">
                    <el-date-picker   v-selfdbclick  v-model="addPlanForm.nextTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="操作" label-width="100px">
                    <el-input v-model="addPlanForm.operation" placeholder="" style="width:220px"></el-input>
                </el-form-item>
                <el-form-item label="模块" label-width="100px">
                        <el-select style="width: 220px" v-model="selectedModule" @change="changeModule">
                            <el-option v-for="item in modules" :label="item.module" :value="item.module" :key="item.module"></el-option>
                        </el-select>
                    </el-form-item>
            </el-form>
            <el-row>
                <span> 选择部件列表(单击选中一行)</span>
                    <el-table :data="okNgData" ref="addTable" @row-click="selectOkNg" highlight-current-row>
                        <el-table-column  prop="parts" label="部件" ></el-table-column>
                        <el-table-column  prop="way" label="保养方法" ></el-table-column>
                        <el-table-column  prop="standard" label="保养标准"></el-table-column>
                        <el-table-column  prop="info" label="保养内容"  width="200"></el-table-column>
                        <el-table-column  prop="period" label="保养周期" ></el-table-column>
                    </el-table>
            </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="is_addShow = false">取 消</el-button> -->
            <el-button type="primary" @click="addSavePlan">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog title="添加保养记录" :visible.sync="is_showAddLog" width="600" :before-close="handleClose">
        <div style="overflow-y: auto;height: 560px;">
            <el-form :model="addPlanForm" class="demo-form-inline" label-position="left">
                <el-form-item label="模块" label-width="100px">
                    <el-select v-model="selectedmodule" placeholder="请选择" @change="changemodule">
                        <el-option v-for="item in adddata" :key="item.module" :label="item.module" :value="item.module">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="部件" label-width="100px">
                    <el-select v-model="selectedParts" placeholder="请选择" @change="changeParts">
                        <el-option v-for="item in optionsParts" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="保养内容" label-width="100px">
                    <el-select v-model="selectedContent" placeholder="请选择" >
                        <el-option v-for="item in optionsContent" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item> -->

            </el-form>
            <el-row>
                <span> 选择部件列表(单击选中一行)</span>
                <el-table :data="addLogTableData" ref="addTableLog" @row-click="selectLogTable" highlight-current-row><!-- @selection-change="selectOkNg" -->
                    <el-table-column prop="parts" label="部件"></el-table-column>
                    <el-table-column prop="way" label="保养方法" ></el-table-column>
                    <el-table-column prop="standard" label="保养标准" ></el-table-column>
                    <el-table-column prop="content" label="保养内容" width="200"></el-table-column>
                    <el-table-column prop="period" label="保养周期" ></el-table-column>
                </el-table>
            </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="is_addShow = false">取 消</el-button> -->
            <el-button type="primary" @click="addSaveLog">确 定</el-button>
        </span>
    </el-dialog>
    <!-- <div style="padding-left: 14px;" v-show="userStoreLimits.testuser=='wtc'">test-user</div> -->
</div>
</template>

<script>
import qwebchannel from '../../qt5.15webchannel.js';
import { mapState } from 'vuex';
import { formatCurrentTime } from '../../utils/tools.js';

export default {
    computed: {
    ...mapState(['userStoreLimits']),

},
    data() {
        return {
            logSearchForm:{
                startTime:formatCurrentTime(),
                endTime:formatCurrentTime(),
                module:''
            },
            addLogForm:{module:'',parts:'',content:'',maintenance_id:1},
            addLogTableData:[
                // {
                //         "parts":"部件",
                //     "content": "保养内容",
                //     "way" :  "保养方法",
                //     "standard" :  "保养标准",
                //     "period" :  "保养周期",

                //      },
                //      {
                //         "parts":"部件1",
                //     "content": "保养内容1",
                //     "way" :  "保养方法1",
                //     "standard" :  "保养标准1",
                //     "period" :  "保养周期1",

                //      }
],
            selectedModule: '',
            selectedModuleSearch: '',
            modules: [{

                    module: "模块1",
                    children: [{
                        parts: "部件",
                        way: "保养方法",
                        standard: "保养标准",
                        info:'222222',
                        period: '1'
                    }]
                }, {

                    module: "模块2",
                    children: [{
                        parts: "部件2",
                        way: "保养方法22",
                        standard: "保养标准2",
info:'1111',
                        period: '2'
                    }]
                }

            ],


            okNgData: [{ parts: 'bujian', way: 'fangfa', standard: 'biaozhun' },
             { parts: 'bujian11', way: 'fangfa11', standard: 'biaozhun11', opt: "NG" }],
            optionsmodule:[{label:"模块1",value:"模块1"}],
            optionsParts:[{label:"bujian1",value:"bujian1"}],
            optionsContent:[{label:"保养内容",value:"保养内容"}],
            selectedmodule: '',
            selectedParts: '',
            selectedContent: '',
            is_showAddLog: false,
            tableDataLog: [
                // {
                //     "id": 888,
                //     "module": 457111111,
                //     "parts": "部件",
                //     "content": "1",
                //     "way": "1", //保养方法
                //     "standard": "ddf",
                //     "period": "每日" //保养周期
                // }, {
                //     "id": 888,
                //     "module": 457,
                //     "parts": "部件1",
                //     "content": "11",
                //     "way": "11", //保养方法
                //     "standard": "ddf1",
                //     "period": "每日1" //保养周期
                // }

            ],
            planCurrentRow: null,
            qtCall: null,
            activeName: 'first',
            tableDataSchedule: [
                // 根据图片内容手动解析的数据
                { id: 22, label: '1111', type: '每天', dateTime: '每天00:00:00保养', nextTime: '2024/7/10 10:00:00', operation: '保养完成' },
                { id: 33, label: '333', type: '每月', dateTime: '每月9号10:00:00保养', nextTime: '2024/7/10 10:00:00', operation: '保养完成' }

            ],
            is_showAddPlan: false,
            addPlanForm: {
                maintenance_id: 1,
                label: '',
                type: '',
                dateTime: formatCurrentTime(),
                nextTime: formatCurrentTime(),
                operation: ''
            },
            adddata: [{

 "module": "模块",
	"children":[
    {
	"parts":"部件",
"content": "保养内容",
"way" :  "保养方法",
 "standard" :  "保养标准",
"period" :  "保养周期",

                     },
      ]
},
{

 "module": "模块1",
	"children":[
{
	"parts":"部件1",
"content": "保养内容1",
"way" :  "保养方法1",
 "standard" :  "保养标准1",
"period" :  "保养周期1",

                     },
]
}
]
        }
    },
    mounted() {
        if (process.env.NODE_ENV != 'production') {
            for (let index = 0; index < 22; index++) {
                this.okNgData.push({ parts: 'bujian', way: 'fangfa', standard: 'biaozhun' })

            }

        }

        if (process.env.NODE_ENV === 'production') {
            new qwebchannel.QWebChannel(qt.webChannelTransport, (channel) => {
                this.qtCall = channel.objects.webBridge;

                this.qtCall.QtToJs.connect((func, json) => {
                    // console.log('connect-func', func)
                    // console.log('connect-func-json', json)
                    if (func == 'RefreshMaintenancePlans') {
                        var datas = JSON.parse(json)
                        if (datas.code === 200) {
                            console.log('获取保养计划数据', datas.data)
                            this.tableDataSchedule = datas.data['MaintenancePlans']
                        }
                    }
                    if (func == 'RefreshMaintenanceLogs') {
                        var datas = JSON.parse(json)
                        if (datas.code === 200) {
                            console.log('获取保养记录数据', datas.data)
                            this.tableDataLog = datas.data['MaintenanceLogs']
                        }
                    }
                    if(func == 'NeedAddMaintenanceLogList'){
                        var datas = JSON.parse(json)
                        if (datas.code === 200) {
                            console.log('获取保养记录添加列表数据', datas.data)
                            this.adddata = datas.data['AddData']
                            this.optionsContent = []
                            this.optionsParts = []
                            this.optionsmodule = []
                            this.adddata.forEach(item => {
                                this.optionsmodule.push({label:item.module,value:item.module})
                            });

                        }

                    }
                    if(func == 'AddMaintenanceLogLinkageList'){
                        var datas = JSON.parse(json)
                        if (datas.code === 200) {
                            console.log('获取保养记录添加二级列表数据', datas.data)
                            this.adddata = datas.data['AddData']
                            this.addLogTableData = []
                            this.adddata.forEach(item => {
                                this.addLogTableData.push(item)
                            });

                        }

                    }
                    if (func == 'AddMaintenancePlanLinkageList') {
                        var datas = JSON.parse(json)
                        if (datas.code === 200) {
                            console.log('保养计划-刷新模块-部件联动', datas.data)
                            console.log('test', '先不赋值')
                            this.modules = []
                            datas.data['AddData'].forEach(item => {
                                this.modules.push({ ...item, opt: 'OK' })
                            })
                            console.log('this.modules', this.modules)
                            console.log('test', '测试日志')
                        }
                    }
                })
                this.qtCall.JsToQt("RefreshMaintenanceLogs", {});
                this.qtCall.JsToQt("RefreshMaintenancePlans", {});
                this.qtCall.JsToQt("AddMaintenancePlanLinkageList", {});
            })
        }
        if (process.env.NODE_ENV === 'production') {
                // this.qtCall.JsToQt('NeedAddMaintenanceLogList',{})

                this.qtCall.JsToQt('AddMaintenanceLogLinkageList',{})
        }
    },
    methods: {
        searchLog(){
            this.qtCall.JsToQt("RefreshMaintenanceLogs", this.logSearchForm);
        },
        changeModule(val){
            console.log('change-module',val)
            this.modules.forEach(item=>{
                var children = item['children']
                if(item['module']==val){
                    console.log('module-children', children)
                    this.okNgData = []
                    children.forEach(child=>{
                        this.okNgData.push({ ...child,opt: 'OK' })
                    })
                    console.log('联动部件列表', this.okNgData)
                }

        })
        this.$refs.addTable.setCurrentRow(this.okNgData[0])
        },
        selectLogTable(row){
            var currentRow = row
            var way = currentRow.way
            var standard = currentRow.standard
            var parts = currentRow.parts
            var content = currentRow.content
            var period = currentRow.period
            this.addLogForm.content = content
            this.addLogForm.parts = parts
            this.addLogForm.module = this.selectedmodule
            if (currentRow.maintenance_id!=null){
                this.addLogForm.maintenance_id = currentRow.maintenance_id
            }

        },
        selectOkNg(selection){

            console.log('selectokng', selection)
            var currentRow = selection
            var way = currentRow.way
            var standard = currentRow.standard
            var parts = currentRow.parts
            if(currentRow.maintenance_id!=null){
                this.addPlanForm.maintenance_id = currentRow.maintenance_id
            }


            this.addPlanForm.label = '模块:' + this.selectedModule + '  部件:' + parts + "  标准:" + standard + "  方法:" + way
        },
        showAddPlan(){
            this.is_showAddPlan = true
            this.qtCall.JsToQt("AddMaintenancePlanLinkageList", {});
        }
        ,
        addSaveLog(){
            // var param = {module:this.selectedmodule,parts:this.selectedParts,content:this.selectedContent}
            console.log('保养计划添加传参',this.addLogForm )
            this.qtCall.JsToQt("NeedAddMaintenanceLog", this.addLogForm);
            this.is_showAddLog = false
        },
        changemodule(val){
            console.log('选中模块',val)
            // this.adddata.forEach(item=>{
            //     if(item['module']==val){
            //         var parts = item['children']
            //         parts.forEach(pitem=>{
            //             this.optionsParts.push({label:pitem['parts'],value:pitem['parts'],children:pitem['children']})
            //         })
            //     }
            // })
            this.addLogTableData = []
            this.adddata.forEach(item=>{
                console.log(item['module'])
                if(item['module']==val){
                    console.log(item)
                    var pitem = item['children']
                    this.addLogTableData=pitem
                }

            })
            this.$refs.addTableLog.setCurrentRow(this.addLogTableData[0])
            selectLogTable(this.addLogTableData[0])
        },
        changeParts(val){
            console.log('选中部件',val)
            console.log('部件数组',this.optionsParts)

            this.optionsParts.forEach(item=>{
                if(item['value']==val){
                    var content = item['children']
                    content.forEach(pitem=>{
                        this.optionsContent.push({label:pitem['content'],value:pitem['content']})
                    })
                }
            })
        },
        showAddLog(){
            // this.userStoreLimits.testuser = '1'
            // this.$store.dispatch('saveUserStoreLimits', {testuser: 111})
            // console.log('storeuser',this.userStoreLimits )
            this.is_showAddLog = true


        },
        addSavePlan() {
            console.log('保养计划添加传参', this.addPlanForm)
            this.qtCall.JsToQt("NeedAddMaintenancePlan", this.addPlanForm);
            this.is_showAddPlan = false
        },
        deletePlan() {
            console.log('保养计划选中行-删除', this.planCurrentRow)
            if (this.planCurrentRow == null) {
                this.$alert('请选择一行数据操作', '提示')
                return
            }
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var param = { id: this.planCurrentRow.id }
                console.log('保养计划选中行-删除传参', param)
                this.qtCall.JsToQt("NeedDeleteMaintenancePlan", param);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        planRowClick(row, column, event) {
            this.planCurrentRow = row
        }
    }

}
</script>

<style scoped>
/deep/ .el-button-group i {
    font-weight: 600;
    font-size: large;
}
</style>
